/**
 * Created by liuzengrong on 2019/8/12.
 */
import React from 'react';
import { Divider, Icon, Tabs } from 'antd';
import { connect } from 'dva';
import Texty from 'rc-texty';
import 'rc-texty/assets/index.css';
import './index.css';

const { TabPane } = Tabs;

const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);

@connect(({ loading, newsDetail }: any) => ({
  newsDetail,
}))
export default class Service extends React.Component {
  componentWillMount(): void {
    const idMatch = this.props.match.params.id;
    const { dispatch } = this.props;
    dispatch({
      type: 'newsDetail/fetch',
      payload: {
        id: idMatch,
      },
    });
  }

  render() {
    const { content } = this.props.newsDetail;
    return (
      <div
        style={{
          maxWidth: '1200px',
          margin: 'auto',
          background: '#fff',
          paddingTop: 10,
          paddingBottom: 80,
        }}
      >
        <div className="texty-demo" style={{ marginTop: 64 }}>
          <h1 style={{ textAlign: 'center' }}>{content.title}</h1>
        </div>

        <Divider orientation="right">
          <span>{content.article}</span> <Divider type="vertical" />
          <span>{content.articleTime}</span>
        </Divider>
        {/*{console.info(content.content )}*/}

        <div dangerouslySetInnerHTML={{ __html: content.content }}></div>
      </div>
    );
  }
}
